<template>
	<view class="container" v-if="!$u.test.isEmpty(dataInfo)" :style="{background: 'url('+ dataInfo.detail.photo +') no-repeat', backgroundSize: '100% 456rpx'}">
		<view class="shop flex-align-center">
			<image class="shop-image" src="../../static/mobileBooth.png"></image>
			<view class="shop-con">
				<view class="shop-title flex-space-between">
					<view>{{dataInfo.detail.store_name}}</view>
				</view>
				<view class="shop-brand">主营类型：{{dataInfo.detail.cate_name}}</view>
				<view class="shop-sales flex-space-between">
					<view>本月销量：{{dataInfo.monthNums}} 单</view>
				</view>
			</view>
		</view>
		
		<view class="product bg-fff">
			<view class="tabs">
				<view class="tabs-list">
					<u-tabs :list="categoryList" :current="categoryTopIndex" :active-color="$setting.colorTheme()" @change="tabsChange" scrollable="true"></u-tabs>
				</view>
			</view>
			
			<view class="product-content flex">
				<scroll-view scroll-y="true" :style="{height: scrollHeight, width: '180rpx'}">
					<view class="category">
						<view class="category-item flex-center" :class="{'category-item-select': tabIndex == index}" v-for="(item,index) in childcategoryList" :key="index" @click="categoryChange(index)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
				<scroll-view class="product-scroll" :scroll-into-view="scrollViewId" scroll-y="true" :style="{height: scrollHeight, flex: 1}" scroll-with-animation="true" @scrolltolower="lower" @scroll="lessscroll">
					
					<b-u-loading-txt :show="loaded?false:true" :txt="'数据加载中...'"/>
					
					<view class="product-con">
						<view class="product-item" v-for="(item,kindex) in productList" :key="kindex" :id="'indexed-list-'+kindex">
							<view class="product-item-title" :class="item.category.name==''?'nopadding':''">{{item.category.name}}</view>
							<view v-for="(oitem,oindex) in item.list" :key="oindex" class="product-item-list flex-align-center" @click="toDetail(oitem)">
								<image class="product-item-image" :src="oitem.product_image"></image>
								<view class="product-item-con flex-column-space-between">
									<view class="product-item-name u-line-2">{{oitem.product_name}}</view>
									<view class="flex-space-between">
										<view class="product-item-price">
											<view><text>￥</text>{{oitem.product_price}}</view>
											<!-- <text v-if="oitem.line_price>0">￥{{oitem.line_price}}</text> -->
											<view class="proTxt">购买</view>
										</view>
										
										<!-- <view class="product-item-sales">交易{{oitem.product_sales}}笔</view> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	export default {
		data() {
			return {
				scrollHeight: '',
				screen: 1,
				shop_supplier_id: 0,
				dataInfo: {},
				tabsList: [
					{
						id: 'all',
						name: "综合"
					},
					{
						id: 'sales',
						name: "销量"
					},
					{
						id: 'price',
						name: "价格(低)"
					},
					{
						id: 'price2',
						name: "价格(高)"
					},
				],
				pageForm: {
					category_id: '',
					page: 1,
					search: '',
					sortType: 'all',
					list_rows: 20,
					stall_id: 0
				},
				productList: [],
				categoryList: [],
				childcategoryList: [],
				tabIndex:0,
				categoryTopIndex: 0,
				categoryIndex: 0,
				loadmoreStatus: 'nomore',
				loaded: true,
				scrollViewId:"indexed-list-0",
				isLeftClick:false,
			}
		},
		async onLoad() {
			if(this.vuex_stall_id>0){
				this.stall_id = this.vuex_stall_id
				this.pageForm.stall_id = this.vuex_stall_id;
			}else{
				uni.reLaunch({
				    url: '/pages/index/index',
				});
			}
			await this.$onLaunched
			console.log()
			if(this.vuex_stall_id==0){
				return;
			}
			this.getHttp();
		},
		computed: {
		    ...mapState(['vuex_stall_id']),
		},
		methods: {
			lower() {
				// if(this.loadmoreStatus == 'nomore') {
				// 	return;
				// }
				// this.pageForm.page++;
				// this.getProductLists();
			},
			lessscroll(e){
				// this.myscrollheight = e.detail.scrollTop
				// 点击左侧导航栏引起的滚动不做判断
				let self = this;
				if(this.isLeftClick){
					this.isLeftClick = false
					return
				}
				// 防抖
				// if(this.timer){
				// 	clearTimeout(this.timer)
				// }
				// this.timer = setTimeout(()=>{
					let scrollTop = e.detail.scrollTop
					// console.log(self.myscroll)
					// console.log(scrollTop,'scrollTop')
					let index = self.myscroll.findIndex(it=>{
						return (it > scrollTop)
					}) -1
					if(index == -2) index = self.myscroll.length-1;
					if(index == self.tabIndex) return
					self.tabIndex = index
					// console.log(self.tabIndex)
				// },100)
			},
			toDetail(item){
				console.log('item',item)
				if(item.activity_type=="discount"){
					this.jump('/pages/categoty/product/product_limited?id='+item.product_id)
				}else if(item.category.type==1){
					this.jump('/pages/categoty/product/product_no_cart?id='+item.product_id)
				}else{
					this.jump('/pages/categoty/product/product?id='+item.product_id)
				}
			},
			categoryChange(e) {
				// this.categoryIndex = e;
				// this.pageForm.category_id = this.categoryBelowList[e].category_id;
				// this.search();
				console.log(e,"点击=====");
				this.isLeftClick = true;
				this.tabIndex = e;
				this.scrollViewId = 'indexed-list-'+e;		
			},
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			search() {
				this.loaded = false;
				this.pageForm.page = 1;
				this.productList = [];
				this.getProductLists();
			},
			tabsChange(e) {
				if(this.categoryTopIndex==e) return;
				this.categoryTopIndex = e;
				this.tabIndex = 0;
				this.childcategoryList = this.categoryList[e]?.child??[];
				this.pageForm.category_id = this.categoryList[e].category_id;
				this.search();
			},
			async getProductLists() {
				return new Promise((resolve, reject) => {
					this.loadmoreStatus = 'loading';
					uni.$u.api.YproductIndex(this.pageForm).then(async (res) => {
						console.log(res.list)
						this.productList = this.productList.concat(res.list);
						this.loadmoreStatus = 'loadmore';
						if(this.productList.length  == res.list.total) {
							this.loadmoreStatus = 'nomore';
						}
						this.loaded = true;
						resolve('ok');
					}).catch(ex => {
						console.log(ex)
						reject(ex)
					});
				})
			},
			postStallInfo() {
				uni.$u.api.postStallInfo({
					stall_id: this.stall_id,
				}).then(res => {
					this.dataInfo = res;
					
					uni.setNavigationBarTitle({
						title:res.detail.store_name
					});
					
					this.$nextTick(() => {
						const query = uni.createSelectorQuery();
						query.in(this).select('.product-scroll').boundingClientRect();
						query.exec((res) => {
							this.scrollHeight = uni.getSystemInfoSync().windowHeight - res[0].top - uni.upx2px(50) + 'px';
						})
					})
				}).catch((er)=>{
					// console.log(er)
					uni.showLoading({
						title: '正在返回首页'
					});
					this.$store.commit('stall_reset');
					setTimeout(()=>{
						uni.hideLoading();
						uni.reLaunch({
						    url: '/pages/index/index',
						});
					},1000)
				})
			},
			async productCate() {
				return new Promise((resolve, reject) => {
					uni.$u.api.productCate({
						stall_id: this.stall_id,
					}).then(res => {
						this.categoryList = res.list;
						// console.log(this.categoryList)
						this.childcategoryList = res.list[this.categoryTopIndex]?.child??[];
						this.pageForm.category_id = this.categoryList[this.categoryTopIndex].category_id;
						resolve('ok');
					})
				})
			},
			
			async getHttp() {
				this.postStallInfo();
				await this.productCate();
				this.search();
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		
		/deep/.u-navbar-inner .u-search .u-input {
			background-color: transparent !important;
		}
		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
			color: transparent;
		}
		.shop {
			padding: 30rpx;
			
			.shop-image {
				width: 84rpx;
				height: 84rpx;
				border-radius: 160rpx;
				background-color: #fff;
				padding:10rpx;
				margin-right: 20rpx;
			}
			
			.shop-con {
				flex: 1;
				margin-left: 16rpx;
			}
			
			.shop-title {
				font-size: 28rpx;
				color: #FFFFFF;
			}
			
			.shop-brand {
				margin-top: 16rpx;
				font-size: 24rpx;
				color: #FFFFFF;
			}
			
			.shop-sales {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.8);
			}
		}
		
		.product {
			border-radius: 24rpx 24rpx 0 0;
			padding: 16rpx 0;
			
			.tabs {
				
				.tabs-list {
					// flex: 1;
				}
				
				.tabs-image {
					width: 44rpx;
					height: 44rpx;
				}
			}
			
			.product-con {
				// padding-top: 30rpx;
				// padding-left: 10rpx;
				// padding-right: 10rpx;
				
				.product-item {
					display: flex;
					flex-direction: column;
					position: relative;
					
					.product-item-title,.product-item-fixed{
						font-size: 26rpx;
						line-height: 50rpx;
						background: #F8F9FA;
						font-weight: 300;
						width: 100%;
						padding:10rpx 0 10rpx 30rpx;
						z-index: 9999;
						position: sticky;
						/* #ifdef H5 */
						top: -1px;
						/* #endif */
						/* #ifdef MP-WEIXIN */
						top: 0;
						/* #endif */
					}
					.nopadding{
						padding:0 0 0 30rpx;
					}
					.product-fixed{
						position: fixed;
						top: calc(192rpx + $statusBarHeight);
						z-index: 9;
					}
					.product-item-list{
						position: relative;
						height: 219rpx;
						margin-bottom: 30rpx;
						padding-left: 16rpx;
						padding-right: 30rpx;
					}
					.product-item-box-image {
						position: relative;
						.product-item-box-bg {
							position: absolute;
								top: 0;
								left: 0;
								width: 165rpx;
								height: 165rpx;	
								background-color: rgba(0, 0, 0, 0.3);
								z-index: 99;
								opacity: 0.8;
								display: flex;
								justify-content: center;
								align-items: center;
							.product-item-box-txt {
								color: #fff;
								font-size: 22rpx;
								background-color: rgba(0, 0, 0, 0.8);
								border-radius: 30rpx;
								padding: 0 14rpx;
								white-space: nowrap;
								line-height: 32rpx;
								
							}
						}			
					}
				
					.product-item-image {
						width: 165rpx;
						height: 165rpx;
					}
					
					.product-item-con {
						margin-left: 30rpx;
						flex: 1;
						border-bottom: 1px solid #EBEBEB;
						padding-bottom: 30rpx;
						height: 100%;
						
						.product-item-name {
							font-size: 28rpx;
							color: #111111;
						}
						
						.product-item-price {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							view {
								font-size: 32rpx;
								color: $uni-color-theme;
								
								text {
									font-size: 22rpx;
									color: $uni-color-theme;
									text-decoration: none;
								}
							}
							
							text {
								font-size: 22rpx;
								text-decoration: line-through;
								color: #CCCCCC;
							}
							.proTxt{
								width: 82rpx;
								border-radius: 20rpx;
								color: #ffffff;
								height: 40rpx;
								font-size: 24rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								background-color: #BB0024;
							}
						}
						
						.product-item-cart {
							width: 52rpx;
							height: 52rpx;
						}
						.seckill-activity {
							font-size: 20rpx;
							padding: 0 4rpx;
							margin: 10rpx 0;
							color: #bb0024;
							display: flex;
							align-items: center;
							border-radius: 8rpx;
							border: 1px solid #bb0024;
							display: inline-block;
							width: fit-content;
							.seckill-activity-txt {
								border: 1px solid #bb0024;
								border-radius: 50%;
								font-size: 18rpx;
								width: 26rpx;
								height: 26rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-left: 6rpx;
								display: inline-block;
								text-align: center;
								transform: scale(0.8);
							}
							.seckill-activity-ele {
								display: inline-block;
								padding: 0 4rpx;
								background-image: linear-gradient(to right, #bb0024, #fa0032);
								color: #fff;
								margin:0 10rpx 0 -4rpx;
								border-radius: 8rpx 0 8rpx 8rpx;
							}
						}
					}
				}
			}
			
			.product-content{
				
				.category {
					background: #F8F9FA;
					width: 100%;
					min-height: 100%;
					
					.category-item {
						width: 100%;
						height: 110rpx;
						color: #666666;
					}
					
					.category-item-select {
						color: $uni-color-theme;
						background: #ffffff;
					}
				}
			}
			
			.product-list {
				padding-bottom: 30rpx;
				margin-top: 28rpx;
				
				.product-item {
					width: 334rpx;
					border-radius: 16rpx;
					margin-bottom: 24rpx;
					overflow: hidden;
				}
				
				.product-item-image {
					width: 334rpx;
					height: 328rpx;
				}
				
				.product-con {
					padding: 12rpx 20rpx 18rpx;
					
					.product-con-name {
						font-size: 26rpx;
						color: #111111;
						font-weight: bold;
						margin-bottom: 14rpx;
						min-height: 68rpx;
					}
					
					.product-con-price {
						font-size: 36rpx;
						font-weight: bold;
						color: $uni-color-theme;
						
						text {
							font-size: 24rpx;
						}
					}
					
					.product-item-old-price {
						font-size: 22rpx;
						text-decoration: line-through;
						color: #CCCCCC;
					}
					
					.product-item-sales {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}
		
		
	}
</style>
